<template>
  <div class="top">
    <div class="content">
      <div class="left" @click="goHome" >
        <img src="../../assets/images/logo.png" alt="" class="img" />
        <p class="name">医院预约挂号统一平台</p>
      </div>
      <div class="right">
        <p class="help">帮助中心</p>
        <p class="login" @click="LoginOrRegest" v-if="!userStore.userInfo" >登录/注册</p>
        <el-dropdown class="login" v-else >
          <span class="el-dropdown-link">
            <span>{{ userStore.userInfo?.username }}</span>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goReaName" >实名认证</el-dropdown-item>
              <el-dropdown-item @click="goOrders" >挂号订单</el-dropdown-item>
              <el-dropdown-item @click="goManger" >就诊人管理</el-dropdown-item>
              <el-dropdown-item @click="logOut" >退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <!-- 登录对话框 -->
  <el-dialog v-model="configStore.isShowDialog" width="500" center @open="openHandler" >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange" >
      <el-tab-pane label="登录" name="first">
        <el-form label-width="70px" :model="loginParmas" ref="form" :rules="rules" >
          <el-form-item label="手机号:" prop="phone" >
            <el-input :prefix-icon="User" v-model="loginParmas.phone" placeholder="请输手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input  type="password" v-model="loginParmas.password" clearable show-password :prefix-icon="Hide" placeholder="请输密码"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="second">
        <el-form label-width="70px" :model="resgisterParmas" :rules="rules1" ref="form1"  >
          <el-form-item label="用户名:" prop="username" >
            <el-input :prefix-icon="User" v-model="resgisterParmas.username" clearable placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password" >
            <el-input :prefix-icon="Hide" type="password" clearable show-password v-model="resgisterParmas.password" placeholder="请输密码"></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone" >
            <el-input :prefix-icon="Iphone" clearable v-model="resgisterParmas.phone" placeholder="请输手机号"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" prop="email" >
            <el-input
            clearable
            :prefix-icon="Orange"
              v-model="resgisterParmas.email"
              style="max-width: 600px"
              placeholder="请输入邮箱"
            >
              <template #append>@qq.com</template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码:" prop="code"  >
            <el-input placeholder="请输入验证码" style="width: 40%;" v-model="resgisterParmas.code" ></el-input>
            <el-button type="primary" style="margin-left: 10px;" @click="getCode" :disabled="codeTime>0 || resgisterParmas.email=='' " >{{ codeTime>0?`请${codeTime}秒后再次获取`:'获取验证码' }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="LoginOrRegests"
          style="width: 80%"
        >
          {{ activeName=="first"?'登录':'注册' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref , reactive } from "vue";
import useConfigStore from "@/stores/moudels/configStore";
import { userRegisterAPI } from '@/api/user'
import { getCodeAPI  } from '@/api/code'
import { ArrowDown , User , Hide , Iphone , Orange } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import useUserStore from "@/stores/moudels/userStore";
import { useRouter } from 'vue-router'
let userStore = useUserStore()
let activeName = ref("first");
let configStore = useConfigStore();
let router = useRouter();
//登录表单实例
let form = ref(null)
//注册表单实例
let form1 = ref(null)
//验证码秒数
let codeTime = ref(0)
//用户注册
let resgisterParmas = reactive({
  username:"",
  password:"",
  phone:"",
  email:"",
  code:""
})
//登录表单校验
let rules = reactive({
  phone:[
    {required:true,message:'请输入手机号',trigger:'blur'},
    {min:11,max:11,message:'请输入正确的手机号格式',trigger:'blur'}
  ],
  password:[
    {required:true,message:'请输入密码',trigger:'blur'}
  ]
})
//注册表单校验
let rules1 = reactive({
  username:[
    {required:true,message:'用户名不能为空',trigger:'blur'},
    {min:3,max:11,message:'用户名长度在3-11之间',trigger:'blur'}
  ],
  password:[
    {required:true,message:'密码不能为空',trigger:'blur'},
    {min:6,max:16,message:'密码长度在6-16之间',trigger:'blur'}
  ],
  phone:[
    {required:true,message:'手机号不能为空',trigger:'blur'},
    {min:11,max:11,message:'手机号长度为11位',trigger:'blur'}
  ],
  email:[
    {required:true,message:'邮箱不能为空',trigger:'blur'},
    {min:9,max:11,message:'邮箱长度为9--11位',trigger:'blur'}
  ],
  code:[
    {required:true,message:'验证码不能为空',trigger:'blur'},
    {min:6,max:6,message:'验证码长度为6位',trigger:'blur'}
  ]
})
//用户登录
let loginParmas = reactive({
  phone:"",
  password:"",
})
//跳转首页
const goHome = ()=>{
  router.push('/')
}
//退出登录
const logOut = ()=>{
  userStore.logout()
  ElMessage.success('退出登录成功')
}
//对话框打开回调
const openHandler = ()=>{
  form.value.resetFields()
  form1.value.resetFields()
  Object.assign(loginParmas,{
    phone:"",
  password:"",
  })
  Object.assign(resgisterParmas,{
    username:"",
    password:"",
    phone:"",
    email:"",
    code:""
  })
}
//获取验证码的回调
const getCode = async ()=>{
  codeTime.value = 60
  let timer = setInterval(()=>{
    codeTime.value--
    if(codeTime.value<=0) {
      clearInterval(timer)
    }
  },1000)
  let res = await getCodeAPI({email:resgisterParmas.email+"@qq.com"})
  console.log(res);
}
//tab页发生改变的回调
const tabChange = (val)=>{
  if(val == "first") {
    form.value.resetFields()
    Object.assign(loginParmas,{
      phone:"",
      password:"",
    })
  }else {
    form1.value.resetFields()
    Object.assign(resgisterParmas,{
      username:"",
      password:"",
      phone:"",
      email:"",
      code:""
    })
  }
}
//用户登录或者注册
const LoginOrRegest = () => {
  configStore.changeDiglog(true);
};
//注册或者登录回调
const LoginOrRegests = async ()=>{
  if(activeName.value == "first") {

    await form.value.validate()
    await userStore.login(loginParmas)
    ElMessage.success('登录成功')
    configStore.changeDiglog(false)

  }else {
    await form1.value.validate()
    resgisterParmas.email+='@qq.com'
    let result = await userRegisterAPI(resgisterParmas)
    console.log(result);
    ElMessage.success('注册成功')
    activeName.value = 'first'
  }
}
//跳转实名认证
const goReaName = ()=>{
  router.push('/user/authentication')
}
//跳转订单管理
const goOrders = ()=>{
  router.push('/user/orders')
}
//前往就诊人管理
const goManger = ()=>{
  router.push('/user/manage')
}
</script>

<style scoped lang="scss">
.top {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 70px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1300px;
    height: 70px;

    .left {
      display: flex;
      align-items: center;
      .img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }
      .name {
        font-size: 30px;
        font-weight: 700;
        opacity: 0.8;
        color: #55a6fe;
      }
    }
    .right {
      display: flex;
      font-size: 15px;
      color: #848282;
      .login {
        margin-left: 10px;
      }
    }
  }
}
</style>
